<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:t="http://myfaces.apache.org/tomahawk">

<!-- 	xmlns:c="http://java.sun.com/jstl/core"xmlns:fmt="http://java.sun.com/jsp/jstl/fmt" -->
<h:head>
	<title class="title">Create Question</title>
	<link href="../css/style2.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet"
		href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<script>
    $(function() {
        $( ".datepicker" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true
        });
    });

    
    </script>

</h:head>
<h:body>
	<h:form styleClass="frm" enctype="multipart/form-data">
		<table class="tbl">
			<tr>
				<th align="center" colspan="2"><h1>Create
						MultiChoiceQuestion</h1></th>
			</tr>
			<tr>
				<td colspan="2">
					<table>
						<tr align="center">
							<td>
							<h:selectOneMenu value="#{createQuestionBean.kindOf}" id="kindOfQuestion" valueChangeListener="#{createQuestionBean.checkKindOfQuestion}">
									<f:selectItems value="#{createQuestionBean.kindOfQuestion}" />
									<f:ajax render="showIsMultiChoice"/>
								</h:selectOneMenu>
								<h:outputText id="showIsMultiChoice" value="#{createQuestionBean.kindIsMultiChoice}"/>
								</td>
							<td><h:selectOneMenu value="#{createQuestionBean.isMultiChoice}">
									<f:selectItem itemLabel="---isMultiChoice---" itemValue="0" />
									<f:selectItem itemLabel="True" itemValue="True" />
									<f:selectItem itemLabel="False" itemValue="False" />
								</h:selectOneMenu>
							</td>
							<td><h:selectOneMenu
									value="#{createQuestionBean.numberOfAnswer}">
									<f:selectItems value="#{createQuestionBean.numberOfChoice}" />
									<f:ajax render="show"></f:ajax>
								</h:selectOneMenu></td>
							<td><h:selectOneMenu value="#{createQuestionBean.level}">
									<f:selectItems value="#{createQuestionBean.listLevel}" />
								</h:selectOneMenu></td>
							<td><h:selectOneMenu value="#{createQuestionBean.course}">
									<f:selectItems value="#{createQuestionBean.listCourse}" />
								</h:selectOneMenu></td>
							<td><h:selectOneMenu
									value="#{createQuestionBean.questionGroup}">
									<f:selectItems value="#{createQuestionBean.listQuestionGroup}" />
								</h:selectOneMenu></td>
							<td><h:inputText styleClass="datepicker"
									value="#{createQuestionBean.date}" disabled="true" /></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table class="tbl">
						<tr>
							<td>
								<table class="tbl">
									<tr>
										<td>Question Content</td>
										<td><h:inputTextarea cols="60" rows="10"
												value="#{createQuestionBean.questionContent}" /></td>
									</tr>
									<tr>
										<td colspan="2">Number of Answers</td>
									</tr>
									<tr>
										<td colspan="2"><h:dataTable var="answer"
												value="#{createQuestionBean.listAnswer}" width="500"
												id="show" rows="#{createQuestionBean.numberOfAnswer}">
												<h:column>
													<h:selectOneRadio disabled="true">
														<f:selectItem itemLabel="#{answer}" itemValue="#{answer}" />
													</h:selectOneRadio>
												</h:column>
												<h:column>
													<h:inputTextarea value="#{createQuestionBean.choice}"
														style="FONT-SIZE: medium; FONT-FAMILY: '.VnArial';" />
												</h:column>
												<h:column>
													<h:selectOneMenu value="#{createQuestionBean.result}">
														<f:selectItem itemLabel="False" itemValue="False" />
														<f:selectItem itemLabel="True" itemValue="True" />
													</h:selectOneMenu>
												</h:column>
											</h:dataTable></td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<table class="tbl">
						<tr>
							<td>
								<fieldset>
									<legend class="title">Insert Image</legend>
									<table>
										<tr>
											<td><t:inputFileUpload
													value="#{createQuestionBean.uploadedFile}" /></td>
										</tr>
										<tr>
											<td><h:graphicImage
													value="../images/#{createQuestionBean.imgPath}" width="250"
													height="180" /></td>
										</tr>
										<tr>
											<td><h:commandButton value="Load"
													action="#{createQuestionBean.loadFile}">
												</h:commandButton> <h:messages /></td>
										</tr>
									</table>
								</fieldset>
							</td>
						</tr>
						<tr>
							<td>
								<fieldset>
									<legend class="title">Insert Media</legend>
									<table>
										<tr>
											<td colspan="2"><h:graphicImage /></td>
										</tr>
										<tr>
											<td><h:commandButton value="Play" disabled="true" /></td>
											<td><h:commandButton value="Stop" disabled="true" /></td>
										</tr>
										<tr>
											<td><h:commandButton value="Load" /></td>
										</tr>
									</table>
								</fieldset>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td align="center" colspan="2"><h:commandButton value="Create"
						action="#{createQuestionBean.saveQuestion}" /> <h:commandButton
						value="Cancel" /></td>
			</tr>
		</table>
	</h:form>
</h:body>
</html>